<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
/* 
1 vue的生命周期 mounted  标签挂载完毕
2 就已经从本地存储中拿出  缓存数据 然后它设置到 vuex 中了吗
  1 vuex-persistedstate 看看它里面有什么资料可以让
     获取缓存数据的工作 提前... 比mounte快 
  2 如何说找不到
    1 token 会经历两个过程
      1 一刷新页面的时候 token 为 undefined
      2 等待一会之后 token就有值了 
      3 vue watch 
  3 watch
    1 默认情况 
      如果 token 值发生了状态的改变 那么watch就会监控到!!! 
      刷新  token : undefined => 有值
      思考 为什么直接刷新页面的时候 
      watch 没有打印出来它token  undefined 
      如果 token 值没有发生了状态的改变 那么watch就不会触发!!! 
      A->B页面
      在A页面的时候 token vuex中 已经有值了 
    2 添加一个数据 
 */

// nuxt 服务端渲染的框架 有些代码是现在服务端运行的!!
import QRCode from "qrcode";

import { mapState } from "vuex";

export default {
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  watch: {
    "userInfo.token": {
      handler: async function () {
        // 用来解决 刷新页面的时候 token 先显示一次 undefined
        const { token } = this.userInfo;
        if (token) {
          // 查询当前的订单状态
          const res = await this.$axios.get(
            "/airorders/" + this.$route.query.id,
            {
              headers: {
                Authorization: "bearer " + token,
              },
            }
          );
          // console.log(res);
          // 根据订单数据来生成可以支付的二维码
          // res.payInfo.code_url;
          QRCode.toCanvas(this.$refs.canvas, res.payInfo.code_url, (error) => {
            if (error) console.error(error);
            console.log("生成二维码成功!! ");
            // 开启轮询 定时器 一遍一遍的去问后台 这个订单支付成功了没有
            let timeId = setInterval(async () => {
              // 查看支付状态
              const res2 = await this.$axios.post(
                "/airorders/checkpay",
                {
                  id: res.id,
                  nonce_str: res.payInfo.nonce_str,
                  out_trade_no: res.payInfo.order_no,
                },
                {
                  headers: {
                    Authorization: "bearer " + token,
                  },
                }
              );
              console.log(res2);
              // trade_state: "SUCCESS"
              if(res2.trade_state==="SUCCESS"){
                // 支付成功 
                clearInterval(timeId);
                this.$message.success("支付成功");
              }
            }, 1500);
          });
        }
      },
      // 页面被加载的时候 watch也会先触发一次
      immediate: true, // 订单页面->支付页面 watch也会触发一次
    },
  },
  // html都挂载完毕
  async mounted() {
    // setTimeout(() => {
    //   const { token } = this.userInfo;
    //   console.log(token);
    // }, 1000);
    // QRCode.toCanvas(this.$refs.canvas, "sample text", function (error) {
    //   if (error) console.error(error);
    //   console.log("success!");
    // });
    // setTimeout(async () => {
    //   const { token } = this.userInfo;
    //   const res = await this.$axios.get("/airorders/" + this.$route.query.id, {
    //     headers: {
    //       Authorization: "bearer " + token,
    //     },
    //   });
    // }, 2000);
  },
};
</script>

<style lang="less" scoped>
</style>